<template>
	<view class="module-content">
		<el-tabs :tab-position="tabPosition" @tab-click="handleMainTitleClick" ref="fElTabs" style="height: 100%;flex: 1;">
			<block v-for="(item,index) in projectModules" :key="index">
				<el-tab-pane :label="item.mainTitle">
					<template v-if="item.otherTitle.length > 0">
						<el-tabs @tab-click="handleOtherTitleClick" :tab-position="tabPosition" :style="{height:(elTabsHeight-40)+'px','padding':'20px 0'}">
							<block v-for="(citem,cindex) in item.otherTitle" :key="cindex">
								<el-tab-pane :label="citem.fTitle" class="custom-scrollbar" :style="{height:(elTabsHeight-40)+'px','padding-bottom':'20px'}">
									<template v-if="citem.cTitle.length>0">
										<block v-for="(ccitem,ccindex) in citem.cTitle" :key="ccindex">
											<el-checkbox :disabled='!(curOtherTitleID == `${curMainTitleID}-${cindex}`)' style="margin-top: 20px;" @change="handleCheckboxChange(ccitem,ccindex)" :label="ccitem" border></el-checkbox>
										</block>
									</template>
									<template v-else>
										<el-alert title="没有三级级模块" type="warning">
										</el-alert>
									</template>
								</el-tab-pane>
							</block>
						</el-tabs>
					</template>
					<template v-else>
						<el-alert title="没有二级模块" type="warning">
						</el-alert>
					</template>
				</el-tab-pane>
			</block>
		</el-tabs>
		<!-- 已经选中的标题 -->
		<view class="tree-content custom-scrollbar">
			<el-tree draggable :data="treeDatas" node-key="id" :default-expand-all="true" empty-text="请在左边选择项目所需要的模块">
				<span class="custom-tree-node" slot-scope="{ node, data }">
					<span>{{ node.label }}</span>
					<span>
						<el-button type="text" size="mini" @click="removeTreeNode(node, data)">
							删除
						</el-button>
					</span>
				</span>
			</el-tree>
			<el-button class="save-module-btn" :disabled="!treeDatas.length>0" type="primary" size="mini" @click="handleSaveModule">保存模块</el-button>
			<el-button class="save-module-btn" :disabled="!createProjectData.module" type="danger" size="mini" @click="handleDeleteModule">删除已选</el-button>
		</view>
	</view>
</template>

<script>
	import {
		projectModules
	} from "@/common/constant.js"
	import {mapState,mapMutations} from "vuex";
	export default {
		data() {
			return {
				elTabsHeight: 446,
				tabPosition: 'left',
				projectModules,
				treeDatas:[],
				curMainTitleID:0,//记录当前一级标题的ID
				curOtherTitleID:-1 //记录当前二级标题的ID
			}
		},
		computed:{
			...mapState(['createProjectData'])
		},
		created() {
			if(this.createProjectData.module){
				this.treeDatas = this.createProjectData.module;
			}
		},
		mounted() {
			this.erd = this.$elementResizeDetectorMaker()
			this.erd.listenTo(this.$refs.fElTabs.$el, (element) => {
				this.elTabsHeight = element.offsetHeight;
			})
		},
		methods: {
			...mapMutations(['createProject']),
			handleSaveModule(){
				this.createProject({
					key:'module',
					val:this.treeDatas
				})
				this.$message({
					message:"已经保存",
					type:"success",
					duration:1000
				});
			},
			handleDeleteModule(){
				this.$alert('确认您当前所选择的模块吗？', '警告', {
				  confirmButtonText: '确定',
				  showCancelButton:true,
				  cancelButtonText:"取消",
				  type:"error",
				  callback: action => {
						if(action === 'confirm'){
							this.treeDatas = [];
							this.curMainTitleID = 0;
							this.curOtherTitleID = -1;
							this.createProject({
								key:'module',
								val:-1
							})
						}
				  }
				});
			},
			removeTreeNode(node, data) {
				const parent = node.parent;
				const children = parent.data.children || parent.data;
				const index = children.findIndex(d => d.id === data.id);
				children.splice(index, 1);
			},
			
			/**
			 * @param {Object} e
			 * {
					id: 1,
					label: '一级 1',
					children: [
					{
						id: 4,
						label: '二级 1-1',
						children: [
						{
							id: 9,
							label: '三级 1-1-1'
						}, {
							id: 10,
							label: '三级 1-1-2'
						}]
					}]
				}
			 */
			handleMainTitleClick(e) { //一级节点
				this.curMainTitleID = e.index;
				this.curOtherTitleID = -1;
				let vaildData = this.treeDatas.some(item=>item.id==e.index);
				if(!vaildData){
					this.treeDatas.push({
						id:e.index,
						label: e.label,
						children: []
					});
				}
			},
			handleOtherTitleClick(e) { //二级节点
				let {treeDatas,curMainTitleID} = this;
				this.curOtherTitleID = `${curMainTitleID}-${e.index}`;
				for (let i = 0;i<treeDatas.length;i++) {
					if(treeDatas[i].id == curMainTitleID){
						let vaildData = treeDatas[i].children.some(item=>item.id==`${curMainTitleID}-${e.index}`);
						if(!vaildData){
							this.treeDatas[i].children.push({
								id:`${curMainTitleID}-${e.index}`,
								label: e.label,
								children: []
							})
						}
					}
				}
			},
			handleCheckboxChange(item,index){ //二级节点的子内容
			
				let {treeDatas,curMainTitleID,curOtherTitleID} = this;
				for (let i = 0;i<treeDatas.length;i++) {
					if(treeDatas[i].id == curMainTitleID){
						for(let j = 0;j<treeDatas[i].children.length;j++){
							if(treeDatas[i].children[j].id == curOtherTitleID){
								let vaildData = treeDatas[i].children[j].children.some(res=>res.id==`${curOtherTitleID}-${index}`)
								if(!vaildData){
									this.treeDatas[i].children[j].children.push({
										id:`${curOtherTitleID}-${index}`,
										label: item,
										children: []
									})
								}
							}
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.module-content {
		height: 100%;
		@include f-jc(flex, space-between)
	}
	.tree-content {
		min-width: 200px;
		margin-left:20px;
		height: 100%;
		.save-module-btn{
			margin-top: 20px;
		}
	}
	.custom-tree-node {
		@include f-1;
		@include f-ai-jc(flex,center,space-between);
		font-size: 14px;
		padding-right: 8px;
	}
</style>
